/* Stylesheet info 								*/
/* Name: Opera										*/
/* Author: Mark Schenk, marks@opera.com 	*/

/* general all-media styles */
html,body { font-family: "Trebuchet MS",Arial,sans-serif; }

a, a:visited, a:hover { color: #CC0000; text-decoration: none; }
a:hover { color: #25366C; }

div.slide { counter-increment: slide; }
div.handout:before { content: "Slide notes:"; font-style: italic; border-bottom: 1px black solid; }

div.slide img { max-width: 50%; }
img.right { float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; }
img.left { float: left; margin-top: 1em; margin-bottom: 1em; margin-right: 1em; }

div.spacer { clear:both; height:0px; }

li.nested { list-style: none;}



/* styles for the navigation and control menu provided the addons */
#navmenu, #controlmenu { display:block; border: 1px #CC0000 solid; background-image:url('../img/operashowbg.jpg'); color: black; font-size: 0.8em; position: fixed; top: 50%; left: 50%; width: 30%; height: 250px; margin-left: -15%; margin-top: -125px; overflow: auto; }
#navmenu ol { margin-top: 5px; margin-bottom: 5px; margin-left: 30px; width: 80%; }
#navmenu a { display: list-item; color: black; list-style-type: decimal; }
#navmenu div, #controlmenu div { background-color:#c00; color: white; line-height: 1.5em; padding-left: 1em; display:block; }

#controlmenu dl { text-align: center; }
#controlmenu dt { font-weight: bold; text-align: left; padding-left: 1em;}
#controlmenu dd { display:inline; cursor: pointer; margin: auto; padding: 2px 5px; }

/* will be overriden in projection section for specific divs */
.layout > * { display: none; }



/* screen styles */
@media screen { 
body { color: black; padding: 0em 2em 2em 2em; margin: 0px; background-color: white; }
.presentation:before { content: ""; display:block; text-align: center; font-size: 1.2em; padding:0.5em; }
.slide { border: 1px black solid; padding: 10px; margin: 0px 0px 20px 0px; }
.slide:before { content: "Slide " counter(slide); float:right; }
.slide h1 { margin: -10px -10px 10px -10px; background-color:#EFEFEF; padding: 5px; }
.handout { margin-top: 0px; border-color: black; border-style: solid; border-width: 1px 0px 0px 0px; padding: 5px; }
.layout > #promo { display:block; text-align:center; padding: 5px; margin-top: 10px;}
.myshowing { color: black; padding: 0em 2em 2em 2em; margin: 0px; background-color: white; }
  div.slide { display: none; }


}







/* projection styles */
/* basic fontsize is roughly screenwidth/50 */
@media projection and (max-device-width:640px) { body { font-size: 12px; }}
@media projection and (min-device-width:640px) { body { font-size: 13px; }}
@media projection and (min-device-width:800px) { body { font-size: 16px; }}
@media projection and (min-device-width:1024px) { body { font-size: 22px; }}
@media projection and (min-device-width:1280px) { body { font-size: 26px; }}
@media projection and (min-device-width:1600px) { body { font-size: 32px; }}



@media projection { 

html, body, .presentation { height: 100%; margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; color: Black; background-color:white; }

div.layout a, div.layout a:hover  { color: inherit; }

/* slide is given a max-height so that pagedown will still work when there's too much content to fit on screen */
div.slide { page-break-after: always; margin: 3em 3em 0em 3em; padding: 0.2em 1em; min-height: 50%; max-height:80%; overflow: visible; }
/* use position absolute for the slide counter, not fixed! Otherwise they'll all get stacked on top of eachother */
/* make sure that the .slide or any of its ancestors do not have a position: value set, because then the viewport will no longer be used */
div.slide:after { content: "Slide " counter(slide); position: absolute; z-index:3; bottom: 0px; width: 100%; text-align:center; line-height: 2em; display:block; font-size: 0.5em; margin-left: -2em; color:white; font-weight: bold;}
div.notes, div.handout { display:none; }
.mine {
 color: black; 
padding: 2em 2em 2em 2em; 
margin: 2px; 
background-color: #ccc; 
width: 70%;
}


#slide1 > h1, #slide1 > h2 { text-align: center; }


h1 { color: #000055; font-size: 1.3em; }
h2 { color: #888888; font-size: 1.1em; }

/* liststyles */

div.slide > ul, div.slide > ol { border-bottom:1px dotted black; border-top:1px dotted black; width: 75%; }
ul, ol, li { list-style-position:inside; margin-left: 0px; }
li li { margin: 0.2em auto 0em 1.5em; color: }
li, .slidecontent { border-top:1px dotted black; padding: 0.3em; padding-left: 0.5em; margin-bottom: 0.2em; }
li.nested { list-style: none;}
li:first-child { border: none; }
li:first-letter { text-transform: uppercase;}
li:hover { color: #CC0000; }
li:hover li { color: black; }
li:hover li:hover { color: #CC0000; }

/* when slidecontent is used */
.slidecontent img.right, .slidecontent img.left { margin-top: auto; }

/* only topleft and topright have background-color, to prevent obscuring */
.layout > div { line-height: 6em; font-size: 0.5em; font-weight: bold; color: white; }
.layout .topleft { position: fixed; top: 0px; left: 0px; padding-left: 1em; width: 100%; background-image:url('../img/operashowbg.jpg'); background-color: #dd0000; display:block; }
.layout .topright { z-index:2; position: fixed; top: 0px; right: 0px; padding-right:1em; background-color: transparent; width: 50%; text-align: right; display:block; }
.layout .bottomleft { position: fixed; bottom: 0px; left: 0px; padding-left:1em; width: 100%; background-image: url(); background-color: #dd0000; display:block; }
.layout .bottomright { z-index:2; position: fixed; bottom: 0px; right: 0px; padding-right:1em; background-color: transparent; width: 50%; text-align: right; display:block; }

/* with position fixed/absolute the images are taken out of the flow, so that the horizontal bars do not expand to the height of the image */
/* bug in Opera makes position:absolute inside position:fixes disappear, so images now also have position:fixed */
.topleft img { position:fixed; top: 0px; left: 0px; max-height:25%;}
.topright img { position:fixed; top: 0px; right: 0px; max-height:25%; }
.bottomleft img { position:fixed; bottom: 0px; left: 0px; max-height:25%;}
.bottomright img { position:fixed; bottom: 0px; right: 0px; max-height:25%;}
}


/* print styles */
@media print { 
html, body { font-size: 12px; margin: 0px; padding: 0px; }
h1 { background-color:#EFEFEF; padding: 5px; margin: -5px -5px 10px -5px; }
.slide { width: 70%; border: 1px black solid; margin-top: 2%; padding: 5px; page-break-inside: avoid; position:relative; min-height:200px;}
.slide:before { content: "Slide " counter(slide); float:right; }
.handout { border-top: 1px black solid; padding: 5px; }
.layout > #promo { display:block; text-align:center; padding: 5px; margin-top: 10px; border: 1px black solid; }
.layout > #promo > a:after { content:""; }

/* following code extracts all the relevant metadata and shows it with Generated Content */
/* code could have been saved by using CSS3 content, but this is compatible with Mozilla */
head { display: block; border: 1px black solid; padding: 5px; }
head:before {content: "Presentation information"; background-color:#EFEFEF; padding: 5px; margin: -5px -5px 0px -5px; display:block; font-size: 1.2em; font-weight:bold; }
title { display: block; padding: 0px; margin: 0px; }
title:before { content: "Title: "; font-weight: bold;}
meta { display:block; }
meta:before { text-transform: capitalize; font-weight:bold;}
meta[name="presdate"]:after, meta[name="slogan"]:after, meta[name="author"]:after, meta[name="contact"]:after, meta[name="company"]:after, meta[name="venue"]:after, meta[name="date"]:after, meta[name="website"]:after { content: ": " attr(content); }
meta[name="presdate"]:before, meta[name="slogan"]:before, meta[name="author"]:before, meta[name="contact"]:before, meta[name="company"]:before, meta[name="venue"]:before, meta[name="date"]:before, meta[name="website"]:before { content: attr(name);  }
a[href]:after { content: " [url: " attr(href) "]"; font-style:italic;}
.presentation:before { float:right; width: 25%; content: "Add notes in this column"; border-bottom: 1px black solid; }
.presentation:after { position:fixed; right: 0px; bottom: 3cm; width: 25%; content: "Add notes in this column"; border-top: 1px black solid; }
}

@page { margin-top: 1cm; margin-bottom: 1cm; margin-left: auto; margin-right: auto; }
